<template>
  <div class="userInfo">
    <div class="rowBox" v-loading="loading">
      <div class="changeAvatar">
        <el-upload
          class="avatar-uploader"
          :action="upload"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
        >
          <img
            v-if="userInfo.headImage"
            :src="userInfo.headImage"
            class="avatar"
          />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        <!-- <span class="avatarTit">更换头像</span> -->
      </div>
      <div class="mid">
        <div class="userNameBox userBlock">
          <label>昵称：</label>
          <el-input
            v-model="userInfo.name"
            maxlength="20"
            placeholder="请输入内容"
          />
        </div>
        <div class="userNameBox userBlock">
          <label>性别：</label>
          <!-- <el-radio v-model="userInfo.sex" label="男">男</el-radio>
          <el-radio v-model="userInfo.sex" label="女">女</el-radio> -->
          <el-radio-group v-model="userInfo.sex">
            <el-radio label="男">男</el-radio>
            <el-radio label="女">女</el-radio>
          </el-radio-group>
        </div>
      </div>
      <div class="right">
        <div class="birthTimeBox userBlock">
          <label>出生日期：</label>
          <el-date-picker
            v-model="userInfo.birthday"
            type="date"
            placeholder="选择日期"
            format="YYYY 年 MM 月 DD 日"
            value-format="YYYY-MM-DD"
          />
        </div>
        <div class="bindPhoneBox userBlock">
          <label>绑定手机号：</label>
          <div class="phoneInfo">
            <span>{{ userInfo.phone }}</span>
            <span @click="$router.push('/changePhone')">更换</span>
          </div>
        </div>
      </div>
    </div>
    <el-button
      class="userInfoSave"
      :loading="submitLoading"
      @click="saveUserInfo"
    >保存</el-button>
  </div>
</template>

<script setup>
import { defineComponent, onBeforeMount, ref, reactive, shallowRef } from 'vue'
import {
  getUserInfo,
  changeUserInfo
} from '@/api/user/user.js'
import {
  upload
} from '@/api/upload.js'
import { useUser } from '@/store/user'

defineComponent({
  name: 'BaseUserInfo'
})
onBeforeMount(() => {
  getUserInfoData()
})

const userStore = useUser()
const loading = ref(false)
const userInfo = reactive({
  headImage: '',
  name: '',
  sex: 0,
  birthday: '',
  phone: ''
})

function getUserInfoData () {
  loading.value = true
  getUserInfo().then(response => {
    const res = response.data;
    if (res.code === "200") {
      userStore.setUserInfo(res.data)
      userInfo.headImage = res.data.headImage
      userInfo.name = res.data.name
      userInfo.sex = res.data.sex
      userInfo.birthday = res.data.birthday
      userInfo.phone = res.data.phone
    }
  }).catch(err => ElMessage.error(err.message))
    .finally(() => {
      loading.value = false
    })
}

let submitLoading = shallowRef(false);
function saveUserInfo () {
  submitLoading.value = true;
  let errMsg = "";
  if (!userInfo.name) {
    errMsg += " 请输入昵称 ";
  }
  if (!userInfo.birthday) {
    errMsg += " 请输入生日 ";
  }
  if (errMsg.length !== 0) {
    ElMessage.error(errMsg);
    submitLoading.value = false;
    return;
  }
  changeUserInfo({
    name: userInfo.name,
    sex: userInfo.sex,
    birthday: userInfo.birthday,
    headImage: userInfo.headImage
  }).then(response => {
    const res = response.data;
    if (res.code === "200") {
      ElMessage.success('修改成功！');
      getUserInfoData();
    }
  }).catch(err => { console.log(err) })
    .finally(() => submitLoading.value = false)
}
function handleAvatarSuccess (res) {
  userStore.setHeadImage(res.data.url)
  userInfo.headImage = res.data.url
  ElMessage.success('上传成功，请保存修改！');
}
</script>

<style lang="scss" scoped>
.userInfo {
  max-width: 1000px;
  padding: 30px;
  border: 1px solid #E5E5E5;
  .rowBox{
    min-height: 500px;
    display: flex;
    justify-content: space-between;
  }
  .changeAvatar {
    width: 134px;
    height: 134px;
    position: relative;
    .avatar {
      width: 100%;
      max-width: 120px;
      max-height: 120px;
    }
    .avatarTit {
      height: 30px;
      line-height: 30px;
      position: absolute;
      bottom: 0;
      font-size: 16px;
      background: rgba(84, 84, 84, 0.5);
      width: 100%;
      text-align: center;
      color: #ffffff;
      cursor: pointer;
    }
  }
  .mid{
    min-width: 230px;
    margin: 0 20px;
    .userNameBox {
      :deep(.el-input){
        width: 180px;
      }
    }
  }
  .userBlock {
    margin-top: 30px;
    display: flex;
    align-items: center;
    label {
      font-weight: normal;
      font-size: 16px;
      color: #666666;
    }
  }
  .right{
    min-width: 230px;
    .bindPhoneBox {
      .phoneInfo {
        font-size: 16px;
        span {
          margin-right: 15px;
          text-decoration: underline;
          cursor: pointer;
        }
        span:nth-child(1) {
          color: #333333;
          text-decoration: none;
          cursor: default;
        }
        span:nth-child(2) {
          color: $mainGlod;
        }
        span:nth-child(3) {
          color: #666666;
        }
      }
    }
  }
  .userInfoSave {
    display: block;
    width: 200px;
    height: 50px;
    margin: 50px auto;
    padding: 0;
    line-height: 50px;
    background: #333333;
    border: 1px solid #333333;
    border-radius: 0px;
    text-align: center;
    color: $mainGlod;
    font-size: 16px;
    cursor: pointer;
    &:hover{
      color: #FFF;
      background: $mainGlod;
      border: 1px solid $mainGlod;
    }
  }
}
</style>
